<template>
  <TopNavigation leftTitle="问诊记录" />
  <view
    class="overflow-scroll overflow-hidden h-[calc(100vh-88rpx)] items-center flex-col w-[100%] flex"
  >
    <!--  -->
    <wd-sticky :offset-top="0">
      <!-- 顶部tab切换 -->
      <view class="w-[100vw]">
        <wd-tabs v-model="tab" @click="changeData">
          <block v-for="item in tabs" :key="item">
            <wd-tab :title="`${item}`" :name="item"></wd-tab>
          </block>
        </wd-tabs>
      </view>
    </wd-sticky>

    <!-- 开药问诊渲染区域 -->
    <view v-if="tab == '图片问诊'" class="w-[100%] flex items-center flex-col">
      <!-- 极速问诊卡片 -->
      <view
        v-for="item in dataList"
        class="mx-0 my-20rpx items-center flex-col w-[90%] flex bg-[#fff]"
        style="padding: 20rpx 0; border-radius: 8px"
      >
        <!-- 顶部头像+支付状态 -->
        <view class="items-center justify-between w-[90%] flex" style="">
          <view class="flex items-center">
            <img src="@/static/doctor.png" alt="" class="w-40rpx h-40rpx mr-20rpx" />
            <wd-text :text="'您的医生为：' + item.docName" customClass="jswzBox"></wd-text>
          </view>
          <wd-text
            :text="item.PaymentIsDone"
            :customClass="
              item.PaymentIsDone == '待支付'
                ? 'dzfBox'
                : item.PaymentIsDone == '已完成'
                  ? 'ywcBox'
                  : 'zxzBox'
            "
          ></wd-text>
        </view>
        <!-- 顶部下方的横线 -->
        <view class="w-[100%] bg-[#f8f8f8] h-2rpx" style="margin: 23rpx 0"></view>
        <!-- 病情描述 -->
        <view class="w-[90%] flex items-center" style="margin-bottom: 20rpx">
          <view class="w-140rpx">
            <wd-text text="病情描述" customClass="bqmsBox"></wd-text>
          </view>
          <wd-text :text="item.description" customClass="mswbBox"></wd-text>
        </view>
        <!-- 价格 -->
        <view class="w-[90%] flex items-center" style="margin-bottom: 20rpx">
          <view class="w-140rpx">
            <wd-text text="价格" customClass="bqmsBox"></wd-text>
          </view>
          <wd-text
            :text="'￥' + (item.money - item.coupon - item.points)"
            customClass="mswbBox"
          ></wd-text>
        </view>
        <!-- 创建时间 -->
        <view class="w-[90%] flex items-center" style="margin-bottom: 20rpx">
          <view class="w-140rpx">
            <wd-text text="创建时间" customClass="bqmsBox"></wd-text>
          </view>
          <wd-text :text="item.creatTime" customClass="timeBox"></wd-text>
        </view>
        <!-- 订单号 -->
        <view class="w-[90%] flex items-center" style="margin-bottom: 20rpx">
          <view class="w-140rpx">
            <wd-text text="订单号" customClass="bqmsBox"></wd-text>
          </view>
          <wd-text :text="item.OrderNumber" customClass="timeBox"></wd-text>
        </view>
        <!-- 底部按钮 -->
        <view class="justify-end mb-20rpx w-[90%] flex items-center" style="margin-top: 30rpx">
          <view>
            <wd-button type="info" size="small" custom-class="qxwzBox">
              {{
                item.PaymentIsDone == "咨询中"
                  ? "查看药房"
                  : item.PaymentIsDone == "待支付"
                    ? "取消问诊"
                    : "删除订单"
              }}
            </wd-button>
            <wd-button
              plain
              type="success"
              size="small"
              @click="rightBottom(item.PaymentIsDone, item.OrderNumber)"
            >
              {{
                item.PaymentIsDone == "咨询中"
                  ? "回到问诊室"
                  : item.PaymentIsDone == "待支付"
                    ? "去支付"
                    : item.PaymentIsDone == "已完成"
                      ? "写评论"
                      : "咨询其他医生"
              }}
            </wd-button>
          </view>
        </view>
      </view>
    </view>
    <!-- 图文问诊渲染区域 -->
    <view v-else class="w-[100%] flex items-center flex-col">
      <view
        v-for="item in dataList"
        class="mx-0 my-20rpx items-center flex-col w-[90%] flex bg-[#fff]"
        style="padding: 20rpx 0; border-radius: 8px"
      >
        <!-- 顶部头像+支付状态 -->
        <view class="items-center justify-between w-[90%] flex" style="">
          <view class="flex items-center">
            <img src="@/static/doctor.png" alt="" class="w-40rpx h-40rpx mr-20rpx" />
            <wd-text :text="'您的医生为：' + item.docName" customClass="jswzBox"></wd-text>
          </view>
          <wd-text
            :text="item.PaymentIsDone"
            :customClass="
              item.PaymentIsDone == '待支付'
                ? 'dzfBox'
                : item.PaymentIsDone == '咨询中'
                  ? 'zxzBox'
                  : 'ywcBox'
            "
          ></wd-text>
        </view>
        <!-- 顶部下方的横线 -->
        <view class="w-[100%] bg-[#f8f8f8] h-2rpx" style="margin: 23rpx 0"></view>
        <!-- 病情描述 -->
        <view class="w-[90%] flex items-center" style="margin-bottom: 20rpx">
          <view class="w-140rpx">
            <wd-text text="病情描述" customClass="bqmsBox"></wd-text>
          </view>
          <wd-text :text="item.description" customClass="mswbBox"></wd-text>
        </view>
        <!-- 价格 -->
        <view class="w-[90%] flex items-center" style="margin-bottom: 20rpx">
          <view class="w-140rpx">
            <wd-text text="价格" customClass="bqmsBox"></wd-text>
          </view>
          <wd-text
            :text="'￥' + (item.money - item.coupon - item.points)"
            customClass="mswbBox"
          ></wd-text>
        </view>
        <!-- 创建时间 -->
        <view class="w-[90%] flex items-center" style="margin-bottom: 20rpx">
          <view class="w-140rpx">
            <wd-text text="创建时间" customClass="bqmsBox"></wd-text>
          </view>
          <wd-text :text="item.creatTime" customClass="timeBox"></wd-text>
        </view>
        <!-- 订单号 -->
        <view class="w-[90%] flex items-center" style="margin-bottom: 20rpx">
          <view class="w-140rpx">
            <wd-text text="订单号" customClass="bqmsBox"></wd-text>
          </view>
          <wd-text :text="item.OrderNumber" customClass="timeBox"></wd-text>
        </view>
        <!-- 底部按钮 -->
        <view class="justify-end mb-20rpx w-[90%] flex items-center" style="margin-top: 30rpx">
          <view>
            <wd-button type="info" size="small" custom-class="qxwzBox">
              {{
                item.PaymentIsDone == "咨询中"
                  ? "查看药房"
                  : item.PaymentIsDone == "待支付"
                    ? "取消问诊"
                    : "删除订单"
              }}
            </wd-button>
            <wd-button
              plain
              type="success"
              size="small"
              @click="rightBottom(item.PaymentIsDone, item.OrderNumber)"
            >
              {{
                item.PaymentIsDone == "咨询中"
                  ? "回到问诊室"
                  : item.PaymentIsDone == "待支付"
                    ? "去支付"
                    : item.PaymentIsDone == "已完成"
                      ? "写评论"
                      : "咨询其他医生"
              }}
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import DoctorAPI from "@/api/system/doctor";
import TopNavigation from "@/components/TopNavigation.vue";
import { OrderTyle } from "@/types/consult";
const tabs = ref(["图文问诊", "开药问诊"]);
const tab = ref("图文问诊");
const dataList = ref<OrderTyle[]>([]);

const changeData = async () => {
  console.log(tab.value);

  const res = await DoctorAPI.getOrders(tab.value);
  dataList.value = [];
  if (res !== undefined) {
    console.log(res);
    for (let i = 0; i < res.length; i++) {
      dataList.value.unshift(res[i]);
    }
  }
};

onLoad(async () => {
  const res = await DoctorAPI.getOrders(tab.value);
  dataList.value = [];
  if (res !== undefined) {
    console.log(res);
    for (let i = 0; i < res.length; i++) {
      dataList.value.unshift(res[i]);
    }
  }
});

function rightBottom(value: string, id: string) {
  switch (value) {
    case "待支付":
      uni.navigateTo({ url: `/pages/PendingPayment/index?id=${id}` });
      console.log(1);
      break;
    case "咨询中":
      uni.navigateTo({ url: "/pages/DoctorConsultationRoom/index" });
      console.log(2);
      break;
    case "已取消":
      uni.navigateTo({ url: "/pages/AskDoctor/index" });
      console.log(3);
      break;
    case "已支付":
      uni.navigateTo({ url: "/pages/AskDoctor/index" });
      console.log(4);
      break;
    default:
      // 默认执行代码块
      break;
  }
  // console.log(value);
}
</script>
<style lang="scss" scoped>
.jswzBox {
  font-size: 30rpx !important;
  font-weight: medium !important;
  line-height: 30rpx !important;
  color: #000000 !important;
  text-align: left;
  letter-spacing: 0px;
}
.dzfBox {
  font-size: 26rpx !important;
  font-weight: medium !important;
  line-height: 30rpx !important;
  color: #f2994a !important;
  text-align: left;
  letter-spacing: 0px;
}
.ywcBox {
  font-size: 26rpx !important;
  font-weight: medium !important;
  line-height: 30rpx !important;
  color: #979797 !important;
  text-align: left;
  letter-spacing: 0px;
}
.zxzBox {
  font-size: 26rpx !important;
  font-weight: medium !important;
  line-height: 30rpx !important;
  color: #16c2a3 !important;
  text-align: left;
  letter-spacing: 0px;
}
.bqmsBox {
  font-size: 26rpx !important;
  font-weight: regular !important;
  line-height: 40rpx !important;
  color: #c3c3c5 !important;
  text-align: left;
  letter-spacing: 0px;
}
.mswbBox {
  font-size: 26rpx !important;
  font-weight: regular !important;
  line-height: 40rpx !important;
  color: #121826 !important;
  text-align: left;
  letter-spacing: 0px;
}
.timeBox {
  font-size: 26rpx !important;
  font-weight: regular !important;
  line-height: 40rpx !important;
  color: #c3c3c5 !important;
  text-align: left;
  letter-spacing: 0px;
}
.qxwzBox {
  margin-right: 20rpx;
}
/* 自定义 wd-tabs 底部条的颜色 */
::v-deep .wd-tabs__line {
  background-color: #16c2a3 !important; /* 修改底部条的颜色 */
}
</style>
